<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>title</title>
    <link href="../../plugins/element_UI/index.css" rel="stylesheet">
    <link href="../../css/element-base.css" rel="stylesheet">
    <link href="../../bootstrap/css/bootstrap.css" rel="stylesheet">
    <style>
        #app .table {
            width: 80%;
            table-layout: fixed;
        }
        #app .table td {
            border-color: #000;
            height: 22px;
            line-height: 22px;
        }
    </style>
    <link rel="stylesheet" href="../../plugins/element_UI/index.css">
    <script src="../../js/axios.min.js"></script>
</head>

<body style="height: 100%;">
<div id="app">
    <!--  头部  -->
    <header class="el-header-title-d">
        <i class="el-icon-menu">预约记录报表</i>
    </header>

    <!--  主体 (表格)  -->

    <div class="el-body-d">
        <table border="1" class="table">
            <tbody>
                <tr>
                    <td colspan="3" bgcolor="green">省平台：{{table.province}}</td>
                    <td colspan="3">电话: {{table.phone}}</td>
                    <td colspan="3">诊间:{{table.province}}</td>
                    <td colspan="3">H5：{{table.province}}</td>
                </tr>
                <tr>
                    <td colspan="12">总号源: {{table.total}}</td>
                </tr>
                <tr>
                    <td colspan="12">预约总数: {{table.appTotal}}</td>
                </tr>
                <tr>
<!--                    <td colspan="4">{{table.ftZoneDataCenter.beforeWeekCount}}</td>-->
                    <td colspan="4">{{table.ftZoneDataCenter.beforeWeekAppCount}}</td>
                    <td colspan="4">{{table.ftZoneDataCenter.currentWeekCount}}</td>
                    <td colspan="4">{{table.ftZoneDataCenter.currentWeekCount}}</td>
                </tr>
                <tr>
                    <td colspan="4">{{table.fqZoneDataCenter}}</td>
                    <td colspan="4">{{table.fqZoneDataCenter}}</td>
                    <td colspan="4">{{table.fqZoneDataCenter}}</td>
                </tr>
                <tr>

                    <td colspan="4">{{table.hpZoneDataCenter}}</td>
                    <td colspan="4">{{table.hpZoneDataCenter}}</td>
                    <td colspan="4">{{table.hpZoneDataCenter}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table border="1" class="table">
            <tbody>
            <tr>
                <td colspan="3" bgcolor="green">省平台：{{table.province}}</td>
                <td colspan="3">电话: {{table.phone}}</td>
                <td colspan="3">诊间:{{table.province}}</td>
                <td colspan="3">H5：{{table.province}}</td>
            </tr>
            <tr>
                <td colspan="12">总号源: {{table.total}}</td>
            </tr>
            <tr>
                <td colspan="12">预约总数: {{table.appTotal}}</td>
            </tr>
            <tr>
                <!--                    <td colspan="4">{{table.ftZoneDataCenter.beforeWeekCount}}</td>-->
                <td colspan="4">{{table.ftZoneDataCenter.beforeWeekAppCount}}</td>
                <td colspan="4">{{table.ftZoneDataCenter.currentWeekCount}}</td>
                <td colspan="4">{{table.ftZoneDataCenter.currentWeekCount}}</td>
            </tr>
            <tr>
                <td colspan="4">{{table.fqZoneDataCenter}}</td>
                <td colspan="4">{{table.fqZoneDataCenter}}</td>
                <td colspan="4">{{table.fqZoneDataCenter}}</td>
            </tr>
            <tr>

                <td colspan="4">{{table.hpZoneDataCenter}}</td>
                <td colspan="4">{{table.hpZoneDataCenter}}</td>
                <td colspan="4">{{table.hpZoneDataCenter}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table border="1" class="table">
            <tbody>
            <tr>
                <td colspan="3" bgcolor="green">省平台：{{table.province}}</td>
                <td colspan="3">电话: {{table.phone}}</td>
                <td colspan="3">诊间:{{table.province}}</td>
                <td colspan="3">H5：{{table.province}}</td>
            </tr>
            <tr>
                <td colspan="12">总号源: {{table.total}}</td>
            </tr>
            <tr>
                <td colspan="12">预约总数: {{table.appTotal}}</td>
            </tr>
            <tr>
                <!--                    <td colspan="4">{{table.ftZoneDataCenter.beforeWeekCount}}</td>-->
                <td colspan="4">{{table.ftZoneDataCenter.beforeWeekAppCount}}</td>
                <td colspan="4">{{table.ftZoneDataCenter.currentWeekCount}}</td>
                <td colspan="4">{{table.ftZoneDataCenter.currentWeekCount}}</td>
            </tr>
            <tr>
                <td colspan="4">{{table.fqZoneDataCenter}}</td>
                <td colspan="4">{{table.fqZoneDataCenter}}</td>
                <td colspan="4">{{table.fqZoneDataCenter}}</td>
            </tr>
            <tr>

                <td colspan="4">{{table.hpZoneDataCenter}}</td>
                <td colspan="4">{{table.hpZoneDataCenter}}</td>
                <td colspan="4">{{table.hpZoneDataCenter}}</td>
            </tr>
            </tbody>
        </table>
    </div>

</div>
</body>
<script src="../../js/vue.js"></script>
<script src="../../plugins/element_UI/index.js"></script>
<script src="../../plugins/jQuery/jquery-1.11.1.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../js/tools.js"></script>
<script src="../../js/param.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/constants.js"></script>
<script src="../../js/dayjs.min.js"></script>
<script>
    Param.initPageParam();
    new Vue({
        el: '#app',
        data: {
            province:'100',
            office:'',
            phone:'',
            web:'',
            total:'',
            appTotal:'',
            table:{}
        },
        created() {
            this.init()
        },
        methods: {
            init: function () {
                axios.post("http://" + window.location.host + '/ordAppointment/selectDataCenter', {}).then(res => {
                    this.table = res.data.data;
                    console.log(this.table)
                    console.log(this.table.ftZoneDataCenter.toJSON())
                }).catch((e) => {
                    alert('获取数据失败');
                });
            }
        },
        computed: {
        },
        watch: {
        }
    })


</script>
</html>
